import React from 'react'
// 引入css样式
import '../assets/css/home.css'
import { Tabs } from 'antd-mobile'
import { Link } from 'react-router-dom'
// 引入接口
// 三个接口新人 秒杀 列表
import {getNew,getSeckill,getIndexGoods} from '../request/app'
class Home extends React.Component {
    constructor() {
        super()
        this.state = {
            // 新人
            goodslist: [
            
            ],
            icon: [
                {
                    id: 1,
                    img: require('../assets/img/限时秒杀.png'),
                    name: '限时秒杀'
                },
                {
                    id: 2,
                    img: require('../assets/img/畅销商品.png'),
                    name: '畅销商品'
                },
                {
                    id: 3,
                    img: require('../assets/img/品质大牌.png'),
                    name: '品质大牌'
                },
                {
                    id: 4,
                    img: require('../assets/img/小U自营.png'),
                    name: '小U自营'
                },
                {
                    id: 5,
                    img: require('../assets/img/积分商城.png'),
                    name: '积分商城'
                },
            ],
            // 限时秒杀
            getseck:[

            ],
            // 列表
            xianglist: [],
            xianglists: [],
            xianglistss:[],
            xianglistsss:[],
        }
    }
   
    componentDidMount(){
        // 列表
        getIndexGoods()
        .then(res=>{
            console.log(res,'首页商品信息');
            if(res.code==200){
                this.setState({
                    xianglist:res.list[0].content,
                    xianglists:res.list[1].content,
                    xianglistss:res.list[2].content,
                    xianglistsss:res.list[3].content,
                })
            }
        })
        // 新人
        getNew()
        .then(res=>{
            console.log(res,'首页新人专享');
            // 上传信息
            if(res.code==200){
                this.setState({
                    goodslist:[
                        ...res.list
                    ]
                     
                })
               
            }
        })
        // 秒杀
        getSeckill()
        .then(res=>{
            console.log(res,'限时秒杀');
            if(res.code==200){
                this.setState({
                    getseck:[
                        ...res.list
                    ]
                })
            }
        })
    }
    render() {
        const { goodslist, icon,getseck, xianglist, xianglists, xianglistss, xianglistsss
        } = this.state
        return (<div className='boxinfo'>
            <div className='header_1'>
                <div className='header_2'>
                    <p>9:41</p>
                    <p>信号</p>
                </div>
                <div className='header_3'>
                    <p>
                        <img src={require('../assets/img/商城LOGO.png')} alt="" />
                    </p>
                    <p>
                        <input type="text" placeholder='    搜索商品' />
                        <span>搜索</span>
                    </p>
                    <p>
                        <img src={require('../assets/img/icon_location@3x.png')} alt="" />
                    </p>
                </div>
            </div>
            <article>
                <div className='home_bg'>
                    <div>
                        <h2>新人专享</h2>
                        <p className='time_bg1'>
                            <span>05</span>:
                            <span>42</span>:
                            <span>47</span>
                        </p>
                        <p>
                            <span>
                                查看全部
                            </span>
                            <span>&gt;</span>
                        </p>
                    </div>
                    <div>
                        <div className='home-title'>
                            <p className='home-title1'>1重礼</p>
                            <p className='home-title2'> 新人特价商品专区(限量供应，先到先得)</p>
                        </div>
                        <ul className='pic_commods'>
                            {
                                goodslist.map(item => {
                                    return <li key={item.id} className='pic_commod'>
                                       <Link to='/detail' state={{ id: item.id }}>
                                       <img src={item.img} alt="" />
                                        <p>￥ {item.price}</p>
                                        <s>￥ {item.market_price}</s>
                                        <p className='gwc'>
                                            <img className='gwcson' src={require('../assets/img/形状.png')} alt="" />
                                        </p>
                                       </Link>
                                    </li>
                                })
                            }
                        </ul>

                    </div>
                    <div className='home-tickee'>
                        <div className='home-title'>
                            <p className='home-title1'>2重礼</p>
                            <p className='home-title2'> 新人通用50元礼券(下单立减，省了又省)</p>
                        </div>
                        <div className='chang'>
                            <img src={require('../assets/img/优惠券@3x.png')} alt="" />
                            <img src={require('../assets/img/优惠券领取@3x.png')} alt="" />
                        </div>
                    </div>
                </div>
                <div className='home_menu '>
                    {
                        icon.map(item => {
                            return <div className='iconindexk' key={item.id} >
                                <img src={item.img} alt="" />
                                <p>{item.name}</p>
                            </div>
                        })
                    }
                </div>
                <div className='home-gg'>
                    <div className='time-bg'>
                        <h2>超级秒杀</h2>
                        <p className='time_bg1'>
                            <span>05</span>:
                            <span>42</span>:
                            <span>47</span>
                        </p>
                    </div>
                    <div className='time-bg1'>
                        <img src={require('../assets/img/end2.png')} alt="" />
                        <div className='time-bg2'>
                            <a href="">7.9折</a>
                            <p> 溪牧原山茶花洁面乳精选太行山最优质……</p>
                            <a href="">每人限购1件</a>
                            <a href="">
                                <img src={require('../assets/img/抢购按钮@3x.png')} alt="" />
                            </a>

                        </div>
                    </div>
                </div>
                <div className='title_1'>
                    <div className='title_ne'>
                        <p className='title_2'>限时秒杀</p>
                        <p className='title_3'> 信任特价商品专区(限量供应，先到先得)</p>
                    </div>
                    <ul className='pic_commods'>
                        {
                            getseck.map(item => {
                                
                                return <li key={item.id} className='pic_commod'>
                                   <Link to='/detail' state={{ id: item.id }}>
                                   <img src={item.img} alt="" />
                                    <p>￥ {item.price}</p>
                                    <s>￥ {item.market_price}</s>
                                    <p className='gwc'>
                                        <img className='gwcson' src={require('../assets/img/形状.png')} alt="" />
                                    </p>
                                    </Link>
                                </li>
                            })
                        }
                    </ul>

                </div>
                <div className='shuang'>
                    <div className='cardplatei'>
                        <h1>双11尖货预约</h1>
                        <img src={require('../assets/img/dui1.png')} alt="" />
                    </div>
                    <div className='picplatein'>
                        <h1>畅购全球</h1>
                        <p>
                            <img src={require('../assets/img/dui2.png')} alt="" />
                            <img src={require('../assets/img/dui3.png')} alt="" />
                        </p>
                    </div>
                </div>
                <Tabs>
                     
                        
                            <Tabs.Tab title='水果' key='fruits'>
                                <div className='navbarr'>
                                    {
                                        xianglist.map(item => {
                                            return (
                                                <div key={item.id} >
                                                    <Link to='/detail' state={{ id: item.id }}>
                                                        <div className='navbarr1'>
                                                            <img src={item.img} alt="" />
                                                            <div className='navbarr2'>
                                                                <p>7.9折</p>
                                                                <p>{item.goodsname}</p>
                                                                <p>{item.description}</p>
                                                                <p>{item.price}</p>
                                                                <s>{item.market_price}</s>
                                                                <p >加入购物车</p>
                                                               
                                                            </div>
                                                        </div>

                                                    </Link>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </Tabs.Tab>
                    
                  
                    <Tabs.Tab title='蔬菜' key='vegetables'>
                        <div className='navbarr'>
                            {
                                xianglists.map(item => {
                                    return (
                                        <div key={item.id} >
                                            <Link to='/detail' state={{ id: item.id }}>
                                                <div className='navbarr1'>
                                                    <img src={item.img} alt="" />
                                                    <div className='navbarr2'>
                                                        <p>7.9折</p>
                                                        <p>{item.goodsname}</p>
                                                        <p>{item.description}</p>
                                                        <p>{item.price}</p>
                                                        <s>{item.market_price}</s>
                                                        <p >加入购物车</p>
                                                    </div>
                                                </div>

                                            </Link>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </Tabs.Tab>
                    <Tabs.Tab title='动物' key='animals'>
                        <div className='navbarr'>
                            {
                                xianglistss.map(item => {
                                    return (
                                        <div key={item.id} >
                                            <Link to='/detail' state={{ id: item.id }}>
                                                <div className='navbarr1'>
                                                    <img src={item.img} alt="" />
                                                    <div className='navbarr2'>
                                                        <p>7.9折</p>
                                                        <p>{item.goodsname}</p>
                                                        <p>{item.description}</p>
                                                        <p>{item.price}</p>
                                                        <s>{item.market_price}</s>
                                                        <p >加入购物车</p>
                                                    </div>
                                                </div>

                                            </Link>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </Tabs.Tab>
                    <Tabs.Tab title='植物' key='botany'>
                        <div className='navbarr'>
                            {
                                xianglistsss.map(item => {
                                    return (
                                        <div key={item.id} >
                                            <Link to='/detail' state={{ id: item.id}}>
                                                <div className='navbarr1'>
                                                    <img src={item.img} alt="" />
                                                    <div className='navbarr2'>
                                                        <p>7.9折</p>
                                                        <p>{item.goodsname}</p>
                                                        <p>{item.description}</p>
                                                        <p>{item.price}</p>
                                                        <s>{item.market_price}</s>
                                                        <p>加入购物车</p>
                                                    </div>
                                                </div>

                                            </Link>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </Tabs.Tab>
                </Tabs>
               
            </article>
        </div>)
    }
}
export default Home